<template>

    <div id="id">
         <top></top>
      <Navigation></Navigation>

          <br>
          <div class="cardbox">
              <div class="cardbox_mid" style="width: 92%;margin: auto;border-radius:10px; padding: 20px;background-color: #fff;margin-bottom: 100px;">
                
                <template>
                    <el-table
                      :data="tableData"
                      style="width: 100%;font-size: 13px;"
                      :row-class-name="tableRowClassName">

                      <el-table-column
                        prop="ordrNumber"
                        label="订单编号"
                        width="280">
                      </el-table-column>

                      <el-table-column
                        prop="spname"
                        label="商品名称"
                        width="260">
                      </el-table-column>

                      <el-table-column
                      prop="orderTime"
                      label="下单时间"
                      width="180"
                      >
                    </el-table-column>


                    <!-- <el-table-column
                    prop="tbl_complete_time"
                    label="完成时间"
                    width="180"
                    >
                  </el-table-column> -->


                  <el-table-column
                  prop="ordrNum"
                  label="商品数量"
                  width="100"
                  >
                </el-table-column>


                      <el-table-column
                        prop="orderMonry"
                        label="商品总价"
                        width="100"
                        >
                      </el-table-column>



                  <el-table-column
                  prop="orderStatus"
                  label="订单状态"
                  width="100"
                  >
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.orderStatus== 1 ? 'primary' : 'danger'"
                      disable-transitions>{{scope.row.orderStatus == 1 ? '已完成':'未完成'}}</el-tag>
                  </template>
                </el-table-column>


                             
              <el-table-column
              prop="paymentStatus"
              label="支付状态"
              width="100"
              >
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.paymentStatus== 1 ? 'primary' : 'info'"
                  disable-transitions>{{scope.row.paymentStatus == 1 ? '已支付':'未支付'}}</el-tag>
              </template>

            </el-table-column>
                

            
            <el-table-column label="操作"
            width="190"
            
            >
                <template slot-scope="scope">


                    <el-button
                    size="mini"
                    :type="scope.row.deliverGoods== 1 ? 'success' : ''"
                    @click="handleEdit(scope.$index, scope.row)">{{scope.row.orderStatus == 1 ? '可评价':'待发货'}}</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row.t_id)">删除</el-button>
                </template>


              </el-table-column>



                    </el-table>
                  </template>

          

        </div>

    </div>


            <el-dialog
            title="评价"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入评论内容,暂不支持图片评价(可多次评价哦)..."
            v-model="textarea">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="Visible()">确 定</el-button>
            </span>
            </el-dialog>


</div>
</template>

<script>
    export default {
     methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
      data() {
        return {
          tableData: [],
          table:[],
          num:0,
          price:0,
          fullscreenLoading: false,
          dialogVisible: false,
          textarea:'',
          data:[],
        }
      },


      mounted:function(){
        this.loadexecution();
    },


      methods: {


    async Visible(){

        if(this.textarea == '')
        {
            this.utils.warning("评论不能为空哦...")
            return;
        }
        this.data.textarea = this.textarea
        console.log(this.data)
        const {data:res} = await this.$http.post('person/Addevaluated',this.$qs.stringify(this.data));
          if(res.success==true){
            this.utils.success("发表成功!")
            this.dialogVisible = false;
          }

       },

        handleEdit(index, row) {

            this.data.dityId = row.dityId
            this.data.orderuser = row.orderuser
            this.data.ordrNumber = row.ordrNumber
            this.dialogVisible = true;
    
        },




        async handleDelete(index, row) {

       
        
        if(this.tableData[index].paymentStatus == 1)
        {
            this.utils.success("当前订单已支付成功,暂时无法删除!")
            return;
        }

        

        const {data:res} = await this.$http.post('person/DeteleOrder',this.$qs.stringify({id:row}));
          if(res.success==true){
            this.tableData.splice(index, 1)
            this.utils.success("删除成功!")
          }

        },


        
        async loadexecution(){ 

            const {data:res} = await this.$http.post('person/findOrderDetailsAndEmail',this.$qs.stringify({orderStatus:1,paymentStatus:1,deliverGoods:1,email:JSON.parse(localStorage.getItem('email'))}))
          if(res.success==true){
             this.tableData = res.result
             console.log(this.tableData)
          }else{
            this.utils.error("查询失败!")
          }
        },





      }
    }
  </script>

<style>
    .el-table .warning-row {
      background: oldlace;
    }
  
    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
  